<template>
  <base-layout :visibleContent="true">
    <template #searchPanel>
      <el-form
        :model="addForm"
        :inline="true"
        :show-message="false"
        ref="addForm"
        label-width="120px"
        label-position="right"
      >
        <el-row>
          <el-col :span="22">套餐信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-col :span="4" align="center">
            <el-avatar size="large" :src="phtoneUrls"></el-avatar>
          </el-col>
          <el-col :span="20">
            <el-form-item label="套餐名称:" prop="carPackageName">
              {{ addForm.carPackageName }}
            </el-form-item>
            <el-form-item label="套餐所属类型:" prop="carPackageDistValue">
              {{ addForm.carPackageDistValue }}
            </el-form-item>
            <el-form-item label="状态:" prop="status">
              {{ addForm.status }}
            </el-form-item>
            <el-form-item label="套餐总共时:" prop="carPackageSumHours">
              {{ addForm.carPackageSumHours }}
            </el-form-item>
            <el-form-item label="套餐总金额:" prop="carPackageAmount">
              {{ addForm.carPackageAmount }}
            </el-form-item>
            <el-row>
              <el-form-item label="备注:" prop="remark">
                {{ addForm.remark }}
              </el-form-item>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </template>

    <template #contentPanel>
      <el-row>
        <el-col :span="22">套餐所包含项目</el-col>
      </el-row>
      <el-row>
        <data-table
          :value="tableProjectList"
          :total-count="tableProjectList.length"
          :table-column-attributes="tableColumnProjectAttributes"
          :isShowPage="true"
          :localPage="true"
        >
        </data-table>
      </el-row>
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import { getImageUrl, parseTimeToYMDHMS } from '@/utils'
import ElRow from 'element-ui/packages/row/src/row'
import ElCol from 'element-ui/packages/col/src/col'
export default {
  components: { ElCol, ElRow },
  mixins: [baseMixin({})],
  props: {
    value: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      addForm: {
        carPackageName: '',
        type: '',
        status: '',
        carPackageSumHours: '',
        carPackageAmount: '',
        remark: '',
      },
      phtoneUrls: '', //图片地址
      tableProjectList: [],
      tableColumnProjectAttributes: [
        { name: '项目名', value: 'projectName', type: 'text' },
        { name: '项目介绍', value: 'remark', type: 'text' },
        { name: '项目工时', value: 'workHours', type: 'text' },
        { name: '项目类型', value: 'projectDictValue', type: 'text' },
        { name: '项目工时费', value: 'amount', type: 'text' },
        { name: '项目提成点', value: 'commission', type: 'text' },
      ],
    }
  },
  watch: {
    value: {
      deep: true,
      handler: function (newValue, oldValue) {
        this.setData()
      },
    },
  },
  async created() {
    this.setData()
  },
  methods: {
    setData() {
      if (this.value) {
        this.addForm = this.value
        this.tableProjectList = this.value.carProjectList
        this.phtoneUrls = getImageUrl(this.value.carPackageImage)
      }
    },
  },
  mounted() {},
}
</script>

<style lang="scss" scoped>
/deep/ .el-avatar--large {
  width: 120px;
  height: 120px;
}
</style>
